<template>
  <div class="left-top-view">
    <title-bar :titleText="titleText"></title-bar>
    <info-box :leftTopDataList="leftTopDataList"></info-box>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import TitleBar from "./common/title-bar.vue";
import InfoBox from "./common/info-box.vue";

const leftTopDataList = ref([
  [
    {
      url: "public/img/icon-group1.8696029c.png",
      text: "空气温度:",
      number: "25°C",
    },
    {
      url: "public/img/icon-group2.dd366642.png",
      text: "空气湿度:",
      number: "60%",
    },
  ],
  [
    {
      url: "public/img/icon-group3.8bd48a18.png",
      text: "风向:",
      number: "南风",
    },
    {
      url: "public/img/icon-group4.1daf4fdd.png",
      text: "风速:",
      number: "3m/s",
    },
  ],
  [
    {
      url: "public/img/icon-group5.229f1123.png",
      text: "雨量:",
      number: "5mm",
    },
    {
      url: "public/img/icon-group6.fc624e8c.png",
      text: "光照:",
      number: "500lx",
    },
  ],
  [
    {
      url: "public/img/icon-group7.3469a046.png",
      text: "大气压力:",
      number: "1013.25 hPa",
    },
    {
      url: "public/img/icon-group8.b1c4164e.png",
      text: "二氧化碳含量:",
      number: "450 ppm",
    },
  ],
  [
    {
      url: "public/img/icon-group9.6d36a65a.png",
      text: "太阳辐射:",
      number: "450 W/m²",
    },
    {
      url: "public/img/icon-group10.a8306ae6.png",
      text: "蒸发量:",
      number: "5 mm/day",
    },
  ],
]);
const titleText = "气象实时监测";
</script>

<style lang="less" scoped>
.left-top-view {
  width: 100%;
  height: 100%;
}
</style>
